<template>
    <div class="Packagecontainer" >
        <div class="header">
            <div class="header-left">
                套餐
            </div>
        </div>
        <div class="package-box">
            <div class="package-item" 
                v-for="(item,index) of packageList" 
                :key="item.id"
            >
                <!--<div class="package-item__index">{{index + 1}}</div> -->
                <div class="package-item__title">
                    <p style="font-size: .32rem;margin-bottom: .15rem">{{item.productname}}</p>
                    <span style="font-size: .12rem;color: #ccc">{{item.productmemo}}</span>
                </div>
                <div class="package-item__button">
                    <p style="font-size: .32rem;">￥{{item.productamount}}</p>
                    <span style="font-size: .12rem;color: #ccc">(赠品:{{item.paygiftmoney}}狗币)</span>
                </div>
               <!-- <div class="package-item__left inline-block">(剩余:{{item.left}}张)</div>
                <div class="package-item__gift inline-block">赠品:{{item.gift}}</div>
                <router-link :to="'/register/'+item.id" tag="div" class="package-item__button inline-block">￥{{item.money}}</router-link>
            -->
            </div>
        </div>
        
    </div>

</template>

<script>
export default {
    name: 'DetailPackage',
    props:{
        packageList: Array
    },
    data: function() {
        return {
            

        }
    }
    
}
</script>

<style lang="stylus" scoped>
.Packagecontainer
    background: #fff
    margin-bottom: .2rem
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .25rem
        border-bottom: 1px solid #ececec
        box-sizing:border-box
        box-shadow: 0 0 3px rgba(238,238,238,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: #ed722e
                margin-right: .20rem
                margin-top: .25rem
    .package-box
        padding: 0 .20rem
        .package-item
            height: 1.12rem
            padding: .2rem 0
            border-bottom 1px solid #ececec
            box-sizing: border-box
            .inline-block
                float: left
            .package-item__index    
                float: left
                width: .3rem
                height: .3rem
                color: #ed722e
                border: 1px solid #ed722e
                border-radius: 50%
                text-align: center
                line-height: .3rem
                margin-right: .13rem 
                margin-top: .38rem
            .package-item__title
                float: left
                height: 1.12rem
                vertical-align: center
                font-weight: bold
                margin-right: .19rem
            .package-item__left  
                font-size: .24rem
                color: #ccc
                margin-right: .46rem
            .package-item__gift
                font-size: .24rem
                color: #ccc
            .package-item__button
                float: right
                width: 1.38rem
                font-size: .32rem
                text-align: center
                color: #ed722e
                margin-left: .1rem
                
@media screen and (max-width: 320px)
    .package-item__left
            margin-right: 0.26rem!important

</style>